<template>
  <div>
    <el-page-header :icon="ArrowLeft">
      <template #title @click="back">
        <span @click="back">返回</span>
      </template>
      <template #content>
        <span class="fs-14"> 诊所管理 </span>
        <el-icon style="vertical-align: -3px;">
          <Right />
        </el-icon>

        <span class="fs-14 cr-blue"> 诊所信息 </span>
      </template>
    </el-page-header>

    <!-- 查询表单 -->
    <el-form :inline="true" :model="formInline" class="mt-12  pad-12">
      <el-form-item label="诊所名称" class="mb-0">
        <el-input v-model="formInline.user" placeholder="请输入诊所名称" />
      </el-form-item>
      <el-form-item label="诊所地址" class="mb-0">
        <el-input v-model="formInline.region" placeholder="请输入诊所地址" />
      </el-form-item>
      <el-form-item label="入驻时间" class="mb-0">
        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="起始时间"
          end-placeholder="结束时间" />
      </el-form-item>
      <el-form-item class="mb-0">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>


    <!-- 新增按钮 -->
    <el-button type="danger" size="default" :icon="Plus" class="mt-12"
      @click="navigateTo('/clinic/add1')">新增医院</el-button>

    <!-- 医院表格 -->
    <el-table :data="tableData" border style="width: 100%" class="mt-12">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="name" label="诊所名称" width="180" />
      <el-table-column prop="address" label="诊所地址" />
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column prop="date" label="营业时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary" @click="navigateTo(`/clinic/edit?id=${scope.row.id}`)">修改</el-button>

          <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
            title="是否确定删除?" @confirm="handelDelete(scope.row.id)">
            <template #reference>
              <el-button link type="danger">删除</el-button>
            </template>
          </el-popconfirm>


        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="float-r mt-12">
      <el-pagination layout="prev, pager, next" :total="100" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { ArrowLeft, Right, Plus, InfoFilled } from '@element-plus/icons-vue'

import { reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 导入接口
import { clinicinfo, clinicdel, } from '../api';

import { useNavigate } from '../hooks'

const value1 = ref('')

const formInline = reactive({
  user: '',
  region: '',
})

const onSubmit = () => {
  console.log('submit!')
}

interface ClinicInfo {
  id: string;
  name: string;
  date: number;
  address: string;
  phone: string;
}

const tableData = ref()

// 在生命周期中请求接口，获得数据，展示表格
onMounted(async () => {
  const res = await clinicinfo({})
  tableData.value = res;
})


const navigator = useNavigate()
const navigateTo = (url: string) => {
  navigator.navigateTo(url)
}
const back = function () {
  navigator.back()
}


// 删除
const handelDelete = async id => {

  // 先判断是否确定删除
  await clinicdel({ id })
  ElMessage({
    message: '删除成功！',
    type: 'success'
  })

  const res = await clinicinfo({})
  tableData.value = res;

}
// 修改
// const handleClick = async ()

</script>

<style scoped lang="scss"></style>